<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" href="../../resources/css/app.css" type="text/css" />
    <title>AIOS Visualization</title>
  	<script type="text/javascript" src="../../resources/js/sencha-touch-all-debug.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../resources/js/dataStores.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../resources/js/dataTables.js" charset="utf-8"></script>
				
	<script type="text/javascript"> var d_i=0; var c_i=0; var m_i=0; var y_i=0; var i=0;</script>
	<script>
			
	
			Ext.application({
			name: 'AIOS',
			requires: [
			          	'Ext.data.Store',
			          	'Ext.dataview.List',
			      		'Ext.Toolbar',
			           	'Ext.chart.Chart', 
					   	'Ext.chart.interactions.PanZoom',
						'Ext.chart.series.*', 
						'Ext.chart.axis.*', 
						'Ext.chart.*',
						'Ext.TitleBar',
						'Ext.draw.Component',
						'Ext.chart.CartesianChart',
						'Ext.Viewport.*'
			           
			       ],
			launch: function() {
				
					Ext.create("Ext.tab.Panel", {
					fullscreen: true,
					activeItem: 4,
					tabBarPosition: 'bottom',

					items: [
					        
					        
					        
//************************************** Present View **************************************************************************				        
					    
				            {
				                title: '現在値',
				              	iconCls: 'now',
				                styleHtmlContent: true,
				                scrollable: true,
				                listeners: {
									activate: function() {
										
										Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetCurrentPower.php',
											method: 'POST',
											callbackkey: 'callback',
											params: {
												tap_id: 1
											},
	
											scope: this,      
	
											callback: function (response, value, request) {
												var wattComponent = Ext.getCmp('c_wattage');
												wattComponent.setValue(value.response.electric_power);
												storeCurrentData(value.response.electric_power);
												
												var ampereComponent = Ext.getCmp('c_amperage');
												ampereComponent.setValue(value.response.electric_current);
												
											},
	
											failure: function (response, request) {
												Ext.Msg.alert(response);
											}
										});
										
									}
								},

				            items: [

			///////////////////// Header ////////////////////
				                    
				                    {
				 		       			xtype : 'titlebar',
				 		       			docked : 'top',
				 		       			title : '現在値',
				 		       			items : [
				 		       			{
				 		       				xtype : 'button',
				 		       				align : 'right',
				 		       				ui : 'round',
				 		       				iconCls: 'home',
				 		       				text : 'ホーム',
				 		       				 handler: function(){
				 		       			            document.location.href = "../../index.html";         
				 		       			        }
				 		       				
				 		       			},   
				 		       			{
				 		       				xtype: 'selectfield',
				 		       				name: 'options',
				 		       				options: [
				 		       					{text: '主幹１', value: '1'},
				 		       					{text: 'リビング', value: '2'},  
				 		       					{text: '子供部屋', value: '3'}
				 		       				]
				 		       			}
					 		       		
				 		       			]
				 		            },
				 		            
	//////////////////////////// Set Current Wattage and Amperage///////////////////////
				 		            
				 	               {
				 		    			xtype: 'fieldset',
				 		    		 	layout: {
				 		                    type: 'hbox',
				 		                    pack: 'start', 
				 		                   align: 'middle'
				 		                },
				 		    			items: [
				 		    			
				 		    			{	
				 		    				 	xtype: 'label',
				 		    				 	html: '&nbsp&nbsp現在の使用電力（全体) - ', 
				 		    			},
				 		    			{
				 		    					xtype: 'textfield',
				 		    					id: 'c_wattage',
				 		    					label: 'W :',
				 		    					readOnly: true,
				 		    					text: '1890.9W'
				 		    				},
				 		    				{
				 		    					xtype: 'textfield',
				 		    					id: 'c_amperage',
				 		    					label: 'A :',
				 		    					readOnly: true,
				 		    					text: '18.91A'
				 		    			}
				 		    			]
				 		    		},
				 		    		
									////////// graph/////////	
									
					 	               {
					 	                   xtype: 'carousel',
					 	                   height: 550,
						 	         	   width: '100%',
	
					 	                   defaults: {
					 	           			styleHtmlContent: true
					 	           		},	
					 	           				

							 	           items: [ 
							 	                  
							 	                  {
														xtype: 'chart',
														background: 'white',
														width: '100%',
														height: 550,
											            animate: true,
											            store: storeCurrent,
											            axes: [{
												                type: 'numeric',
												                position: 'right',
												                fields: ['data1'],
												                title: {
												                    text: '電力量(W)',
												                    fontSize: 15
												                },
												                grid: {
												                    odd: {
												                        opacity: 0.25,
												                        fill: '#ddd',
												                        stroke: '#bbb',
												                        'stroke-width': 0.5
												                    }
												                },
												                minimum: 0
													       		 }, 

													       			{
													                type: 'category',
													                position: 'bottom',
													             	fields: ['name'],
													         }],
													            
													    series: [ {
													                type: 'line',
													                highlight: {
													                    size: 7,
													                    radius: 7
													                },
													                style: {
													                    stroke: '#F0A50A'
													                },
																	markerConfig: {
													                    type: 'circle',
																		size: 1,
																		radius: 1,
																		stroke: '#F0A50A',
																		'stroke-width': 1
													                },
																	fill: false,
													                xField: 'name',
													                yField: 'data1'
													               
													            }]
													},
													{

														xtype: 'fieldset',
														id : 'currentTableView',
														items: [
														        {
														        	xtype: 'panel',
																	width: '100%',
																	height : '100%',
																	styleHtmlContent: true,
																	html: [generateHtmlcurrentTable(storeCurrent)],
														        }
															]
								 	                }
							 	                  ]
					 	           				}
					 	     				]
					 	      		 },
				 		    		
				 		    		
				 		    		
				                
				                
				                
				                
				                
				                
//***************************************** Day View *********************************************************				                
				                
				            {
				                title: '日',
				                pressed : true,
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
								
								listeners: {
									activate: function() {
										
										Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id=3&report_type=0&date_start=2013-12-12&date_end=2013-12-12',
											type: 'GET',
											crossDomain: true,
											dataType: "json",
											callbackkey: 'callback',
											scope: this,
											/* params: {
												tap_id: 1
											}, */
											scope: this,      /// fix handler scope
	
											callback: function (response, value, request) {
												storeTargetHoursData(value);
										    },
										    

											failure: function (response, request) {
												Ext.Msg.alert(response);
											}
										}); 
										
										/* Ext.getCmp('dayCompareTotal').setValue('');
										Ext.getCmp('dayCompareMax').setValue('');
										Ext.getCmp('dayComapreDate').setValue(''); */
										
									}
								},
				                
				                items: [
				
				   ///////////////////// Header ////////////////////
					 		               {
					 		       			
					 		       			xtype : 'titlebar',
					 		       			docked : 'top',
					 		       			title : '日',
					 		       			items : [
					 		       			{
					 		       				xtype : 'button',
					 		       				align : 'right',
					 		       				ui : 'round',
					 		       				iconCls: 'home',
					 		       				text : 'ホーム',
					 		       				 handler: function(){
					 		       			            document.location.href = "../../index.html";         
					 		       			        }
					 		       				
					 		       			},   
					 		       			{
					 		       				xtype: 'selectfield',
					 		       				name: 'options',
					 		       				options: [
					 		       					{text: '主幹１', value: '1'},
					 		       					{text: 'リビング', value: '2'},  
					 		       					{text: '子供部屋', value: '3'}
					 		       				]
					 		       			}
					 		       			]
					 		            },
					 		            
			//////////////////////////// Set Current Wattage and Amperage///////////////////////		 		            
					 		            
					 	             /*   {
					 		    			xtype: 'fieldset',
					 		    		 	layout: {
					 		                    type: 'hbox',
					 		                    pack: 'start', 
					 		                   align: 'middle'
					 		                },
					 		    			items: [
					 		    			{	
					 		    				 	xtype: 'label',
					 		    				 	html: '現在の使用電力（全体) - ', 
					 		    			},
					 		    			{
					 		    					xtype: 'textfield',
					 		    					id: 'd_wattage',
					 		    					label: 'W :',
					 		    					readOnly: true,
					 		    					text: '1890.9W'
					 		    				},
					 		    				{
					 		    					xtype: 'textfield',
					 		    					id: 'd_amperage',
					 		    					label: 'A :',
					 		    					readOnly: true,
					 		    					text: '18.91A'
					 		    			},
					 		    			]
					 		    		}, */
					 		    		
			////////////////// Target and Compare date selector////////////////		 		    		
					 		    		
					 	                {
					 		    			
					 		    			xtype: 'fieldset',
					 		    			bodyStyle: "background-color: #C0C0C0;",
					 		    		 	layout: {
					 		    	            type: 'hbox',
					 		    	            pack: 'start', 
					 		    	            align: 'left'
					 		    	        },
					 		    	        
					 		    			items: [
					 		    			        {
														xtype: 'fieldset',
														bodyStyle: "background-color: #C0C0C0;",
													 	layout: {
												        type: 'vbox',
												        pack: 'start', 
												        align: 'left'
											     },
											     
													items: [
									 		    			{
									 		    	               xtype: 'datepickerfield',
									 		    	               destroyPickerOnHide: true,
									 		    	                label: '対象日',
									 		    	                name: 'targetDate',
									 		    	                dateFormat :"Y/m/d",
									 		    	                value: new Date(),
									 		    	              	picker: {
									 		    	              		yearFrom : new Date().getFullYear()-1,
									 		    	              		slotOrder:["year", "month","day"],
									 		    	              		
									 		    	              		 listeners: {
									 		    	                       show: function(component, eOpts) {
									 		    	                           var date = this.getValue();
									 		    	                           if (!date || isDateInPast(date)) {
									 		    	                               this.setValue(new Date());
									 		    	                           }
									 		    	                       },
									 		    	                       
									 		    	                      change: function(picker, value) {
									 		    	       
									 		    	                    	  
									 		   /////////////json data for Day target ///////////
																			 	
											 		    	        			Ext.data.JsonP.request({
																					url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id=3&report_type=0&date_start=2013-12-12&date_end=2013-12-12',
																					type: 'GET',
																					crossDomain: true,
																					dataType: "json",
																					callbackkey: 'callback',
																					scope: this,
																					/* params: {
																						tap_id: 1
																					}, */
																					scope: this,      /// fix handler scope
											
																					callback: function (response, value, request) {
																						storeTargetHoursData(value);
																				    },
																				    

																					failure: function (response, request) {
																						Ext.Msg.alert(response);
																					}
																				}); 
											 		    	                 } 
									 		    	                       
									 		    	                   }, 
									 		    	              	}
									 		    			},
									 		    			        
									 		    			{
									 		    				xtype: 'fieldset',
									 		    				bodyStyle: "background-color: #C0C0C0;",
									 		    			 	layout: {
									 		    	                type: 'vbox',
									 		    	                pack: 'start', 
									 		    	               align: 'middle'
									 		                },
									 		    			items: [
									 		    			{
									 		    					xtype: 'textfield',
									 		    					id: 'dayTargetTotal',
									 		    					label: '累積電力量',
									 		    					readOnly: true,
									 		    					value: '3124'
									 		    				}, {
									 		    					xtype: 'textfield',
									 		    					id: 'dayTargetMax',
									 		    					label: '最大電力',
									 		    					readOnly: true,
									 		    					value: '192'
									 		    			}]
									 		    			
									 		    		}]}, {
									 						
									 						xtype : 'spacer'
									 					},
					 		    		
					 		    		{
					 		    			

											xtype: 'fieldset',
											bodyStyle: "background-color: #C0C0C0;",
										 	layout: {
									        type: 'vbox',
									        pack: 'start', 
									        align: 'left'
								     },
								     
										items: [
						 		    			{
						 		    				xtype: 'datepickerfield',
						 		    	               destroyPickerOnHide: true,
						 		    	               id: 'dayComapreDate',
						 		    	                label: '比較日',
						 		    	                name: 'targetDate',
						 		    	                dateFormat :"Y/m/d",
						 		    	                value: new Date(),
						 		    	              	picker: {
						 		    	              		yearFrom : new Date().getFullYear()-1,
						 		    	              		slotOrder:["year", "month","day"],
						 		    	              		
						 		    	              		 listeners: {
						 		    	                       show: function(component, eOpts) {
						 		    	                           var date = this.getValue();
						 		    	                           if (!date || isDateInPast(date)) {
						 		    	                               this.setValue(new Date());
						 		    	                           }
						 		    	                       },
						 		    	                       cancel: function(picker, eOpts) {
						 		    	                            this.fireEvent('change', this, null);
						 		    	                       },
						 		    	                      change: function(picker, value) {
								 		    	                   
						 		    	                    	 Ext.data.JsonP.request({
																		url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id=3&report_type=0&date_start=2013-12-12&date_end=2013-12-12',
																		type: 'GET',
																		crossDomain: true,
																		dataType: "json",
																		callbackkey: 'callback',
																		scope: this,
																		/* params: {
																			tap_id: 1
																		}, */
																		scope: this,      /// fix handler scope
								
																		callback: function (response, value, request) {
																			storeCompareHoursData(value);
																	    },
																	    

																		failure: function (response, request) {
																			Ext.Msg.alert(response);
																		}
																	}); 
						 		    	                    	  
								 		    	                 } 
						 		    	                       
						 		    	                   }, 
						 		    	              	}
						 		    		},
						 		    			        
							 		    	{
							 		    				xtype: 'fieldset',
							 		    				bodyStyle: "background-color: #C0C0C0;",
							 		    			 	layout: {
							 		    	                type: 'vbox',
							 		    	                pack: 'start', 
							 		    	               align: 'middle'
							 		                },
							 		    			items: [
							 		    			{
							 		    					xtype: 'textfield',
							 		    					id: 'dayCompareTotal',
							 		    					label: '累積電力量',
							 		    					readOnly: true,
							 		    					value: ''
							 		    				}, {
							 		    					xtype: 'textfield',
							 		    					id: 'dayCompareMax',
							 		    					label: '最大電力',
							 		    					readOnly: true,
							 		    					value: ''
							 		    			}]
							 		    			
							 		    		}]
					 		    			
					 		    			}
					 		    		
					 		    		]
										},	
										
						////////// graph/////////	
						
					 	               {
					 	                   xtype: 'carousel',
					 	                   height: 430,
						 	         		width: '100%',
	
					 	                   defaults: {
					 	           				styleHtmlContent: true	
					 	           			},

							 	           items: [
							 	                  {
														
														xtype: 'chart',
														id : 'gORt',
														
														background: 'white',
														width: '100%',
														height: 430,
																						
											            animate: true,
											            store: storeHours,
											            axes: [{
												                type: 'numeric',
												                position: 'left',
												                fields: ['data1','data2'],
												                title: {
												                    text: '電力量(Wh)',
												                    fontSize: 15
												                },
												                grid: {
												                    odd: {
												                        opacity: 0.25,
												                        fill: '#ddd',
												                        stroke: '#bbb',
												                        'stroke-width': 0.5
												                    }
												                },
												                minimum: 0
													       		 }, 

													       			 {
													                type: 'category',
													                position: 'bottom',
													                fields: ['name'],
													                title: {
													                    text: '時',
													                    fontSize: 15
													                }
													         }],
													            
													    series: [{
													                type: 'bar',
													                highlight: {
													                    size: 7,
													                    radius: 7
													                },
													                style: {
													                     fillStyle: '#F0A50A'
													                },
																	fill: true,
													                xField: 'name',
													                yField: 'data1'
													               
													            }, {
													                type: 'line',
													                highlight: {
													                    size: 7,
													                    radius: 7
													                },
													                style: {
													                    stroke: '#C20024'
													                },
																	markerConfig: {
													                    type: 'circle',
																		size: 1,
																		radius: 1,
																		stroke: '#C20024',
																		'stroke-width': 1
													                },
																	fill: false,
													                xField: 'name',
													                yField: 'data2'
													               
													            }]
													},
													   {
															xtype: 'fieldset',
															id : 'HourTableView',
														 	layout: {
												                type: 'hbox',
												               pack: 'start', 
												               align: 'middle'
												            },
															items: [
															        {
															        	xtype: 'panel',
																		width: '50%',
																		height : '100%',
																		styleHtmlContent: true,
																		html: [ generateHtmlHoursTable(storeHours,0,12)],
															        },
															        {
															        	xtype: 'panel',
																		width: '50%',
																		height : '100%',
																		styleHtmlContent: true,
																		html: [ generateHtmlHoursTable(storeHours,12,24)],
															        }
															       
																]
								 	                }, 
					 	     				]
					 	      		 },

					 	                
					 		    ]
				            },
				            
				  
				            
				            
				            
				            
				            
				            
// ******************************************** Month View *************************************************************				            
				            
				            {
				                title: '月',
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										
										/* Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetCurrentPower.php',
											method: 'POST',
											callbackkey: 'callback',
											params: {
												tap_id: 1
											},
	
											scope: this,      /// fix handler scope
	
											callback: function (response, value, request) {
												var wattComponent = Ext.getCmp('m_wattage');
												wattComponent.setValue(value.response.electric_power);
												
												var ampereComponent = Ext.getCmp('m_amperage');
												ampereComponent.setValue(value.response.electric_current);
												
											},
	
											failure: function (response, request) {
												Ext.Msg.alert(response);
											}
										}); */
										
										 Ext.data.JsonP.request({
												url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id=3&report_type=1&date_start=2013-02-12&date_end=2013-12-12',
												type: 'GET',
												crossDomain: true,
												dataType: "json",
												callbackkey: 'callback',
												scope: this,
												/* params: {
													tap_id: 1
												}, */
												scope: this,      /// fix handler scope
		
												callback: function (response, value, request) {
													storeTargetDayData(value);
											    },
											    

												failure: function (response, request) {
													Ext.Msg.alert(response);
												}
											}); 
										
									}
								},

				            items: [
				                    
		////////////////////////////// Header /////////////////////////////             
				                    {
				 		       			xtype : 'titlebar',
				 		       			docked : 'top',
				 		       			title : '月',
				 		       			items : [
				 		       			{
				 		       				xtype : 'button',
				 		       				align : 'right',
				 		       				ui : 'round',
				 		       				iconCls: 'home',
				 		       				text : 'ホーム',
				 		       				 handler: function(){
				 		       			            document.location.href = "../../index.html";         
				 		       			        }
				 		       				
				 		       			},   
				 		       			{
				 		       				xtype: 'selectfield',
				 		       				name: 'options',
				 		       				options: [
				 		       					{text: '主幹１', value: '1'},
				 		       					{text: 'リビング', value: '2'},  
				 		       					{text: '子供部屋', value: '3'}
				 		       				]
				 		       			}
				 		       			]
				 		            },
				 		            
		//////////////////////////// Set Current Wattage and Amperage///////////////////////
				 		         /*    
				 	               {
				 		    			xtype: 'fieldset',
				 		    		 	layout: {
				 		                    type: 'hbox',
				 		                    pack: 'start', 
				 		                   align: 'middle'
				 		                },
				 		    			items: [
				 		    			 
				 		    			{	
				 		    				 	xtype: 'label',
				 		    				 	html: '現在の使用電力（全体) - ', 
				 		    			},
				 		    			{
				 		    					xtype: 'textfield',
				 		    					id: 'm_wattage',
				 		    					label: 'W :',
				 		    					readOnly: true,
				 		    					text: '1890.9W'
				 		    				},
				 		    				{
				 		    					xtype: 'textfield',
				 		    					id: 'm_amperage',
				 		    					label: 'A :',
				 		    					readOnly: true,
				 		    					text: '18.91A'
				 		    			}]
				 		    		}, */
				 		    		
				 		   		////////////////// Target and Compare date selector////////////////		 		    		
				 		    		
				 	                {
				 		    			
				 		    			xtype: 'fieldset',
				 		    			bodyStyle: "background-color: #C0C0C0;",
				 		    		 	layout: {
				 		    	            type: 'hbox',
				 		    	            pack: 'start', 
				 		    	            align: 'left'
				 		    	        },
				 		    	        
				 		    			items: [
				 		    			        {
													xtype: 'fieldset',
													bodyStyle: "background-color: #C0C0C0;",
												 	layout: {
											        type: 'vbox',
											        pack: 'start', 
											        align: 'left'
										     },
										     
												items: [
								 		    			{
								 		    	               xtype: 'datepickerfield',
								 		    	               destroyPickerOnHide: true,
								 		    	                label: '対象月',
								 		    	                name: 'targetDate',
								 		    	                dateFormat :"Y/m",
								 		    	                value: new Date(),
								 		    	              	picker: {
								 		    	              		yearFrom : new Date().getFullYear()-1,
								 		    	              		slotOrder:["year", "month"],
								 		    	              		
								 		    	              		 listeners: {
								 		    	                       show: function(component, eOpts) {
								 		    	                           var date = this.getValue();
								 		    	                           if (!date || isDateInPast(date)) {
								 		    	                               this.setValue(new Date());
								 		    	                           }
								 		    	                       },
								 		    	                       
								 		    	                      change: function(picker, value) {
								 		    	                    	  
								 		    	                    	 Ext.data.JsonP.request({
																				url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id=3&report_type=1&date_start=2013-12-12&date_end=2013-12-12',
																				type: 'GET',
																				crossDomain: true,
																				dataType: "json",
																				callbackkey: 'callback',
																				scope: this,
																				/* params: {
																					tap_id: 1
																				}, */
																				scope: this,      /// fix handler scope
										
																				callback: function (response, value, request) {
																					storeTargetDayData(value);
																			    },
																			    

																				failure: function (response, request) {
																					Ext.Msg.alert(response);
																				}
																			}); 

								 		    	                    	  
										 		    	                 } 
								 		    	                       
								 		    	                   }, 
								 		    	              	}
								 		    			},
								 		    			        
								 		    			{
								 		    				xtype: 'fieldset',
								 		    				bodyStyle: "background-color: #C0C0C0;",
								 		    			 	layout: {
								 		    	                type: 'vbox',
								 		    	                pack: 'start', 
								 		    	               align: 'middle'
								 		                },
								 		    			items: [
								 		    			{
								 		    					xtype: 'textfield',
								 		    					id: 'monthTargetTotal',
								 		    					label: '累積電力量',
								 		    					readOnly: true,
								 		    					value: '3124'
								 		    				}, {
								 		    					xtype: 'textfield',
								 		    					id: 'monthTargetMax',
								 		    					label: '最大電力',
								 		    					readOnly: true,
								 		    					value: '192'
								 		    			}]
								 		    			
								 		    		}]}, {
								 						
								 						xtype : 'spacer'
								 					},
				 		    		
				 		    		{

										xtype: 'fieldset',
										bodyStyle: "background-color: #C0C0C0;",
									 	layout: {
								        type: 'vbox',
								        pack: 'start', 
								        align: 'left'
							     },
							     
									items: [
					 		    			{
					 		    				xtype: 'datepickerfield',
					 		    	               destroyPickerOnHide: true,
					 		    	                label: '比較月',
					 		    	                name: 'targetDate',
					 		    	                dateFormat :"Y/m",
					 		    	                value: new Date(),
					 		    	              	picker: {
					 		    	              		yearFrom : new Date().getFullYear()-1,
					 		    	              		slotOrder:["year", "month"],
					 		    	              		
					 		    	              		 listeners: {
					 		    	                       show: function(component, eOpts) {
					 		    	                           var date = this.getValue();
					 		    	                           if (!date || isDateInPast(date)) {
					 		    	                               this.setValue(new Date());
					 		    	                           }
					 		    	                       },
					 		    	                       cancel: function(picker, eOpts) {
					 		    	                            this.fireEvent('change', this, null);
					 		    	                       },
					 		    	                      change: function(picker, value) {

					 		    	                    	 Ext.data.JsonP.request({
																	url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id=3&report_type=1&date_start=2013-12-12&date_end=2013-12-12',
																	type: 'GET',
																	crossDomain: true,
																	dataType: "json",
																	callbackkey: 'callback',
																	scope: this,
																	/* params: {
																		tap_id: 1
																	}, */
																	scope: this,      /// fix handler scope
							
																	callback: function (response, value, request) {
																		storeCompareDayData(value);
																    },
																    

																	failure: function (response, request) {
																		Ext.Msg.alert(response);
																	}
																}); 
					 		    	                      } 
					 		    	                       
					 		    	                   }, 
					 		    	              	}
					 		    		},
					 		    			        
						 		    	{
						 		    				xtype: 'fieldset',
						 		    				bodyStyle: "background-color: #C0C0C0;",
						 		    			 	layout: {
						 		    	                type: 'vbox',
						 		    	                pack: 'start', 
						 		    	               align: 'middle'
						 		                },
						 		    			items: [
						 		    			{
						 		    					xtype: 'textfield',
						 		    					id: 'monthCompareTotal',
						 		    					label: '累積電力量',
						 		    					readOnly: true,
						 		    					value: ''
						 		    				}, {
						 		    					xtype: 'textfield',
						 		    					id: 'monthCompareMax',
						 		    					label: '最大電力',
						 		    					readOnly: true,
						 		    					value: ''
						 		    			}]
						 		    			
						 		    		}]
				 		    			
				 		    			}
				 		    		
				 		    		]
									},	
			 		    		
									////////// graph/////////	
									
					 	               {
					 	                   xtype: 'carousel',
					 	                   height: 430,
						 	         		width: '100%',
	
					 	                   defaults: {
					 	           				styleHtmlContent: true	
					 	           			},

							 	           items: [
							 	                  {
														
														xtype: 'chart',
														background: 'white',
														width: '100%',
														height: 430,
																						
											            animate: true,
											            store: storeDays,
											            axes: [{
												                type: 'numeric',
												                position: 'left',
												                fields: ['data1','data2'],
												                title: {
												                    text: '電力量(Wh)',
												                    fontSize: 15
												                },
												                grid: {
												                    odd: {
												                        opacity: 0.25,
												                        fill: '#ddd',
												                        stroke: '#bbb',
												                        'stroke-width': 0.5
												                    }
												                },
												                minimum: 0
													       		 }, 

													       			 {
													                type: 'category',
													                position: 'bottom',
													                fields: ['name'],
													                title: {
													                    text: '日',
													                    fontSize: 15
													                }
													         }],
													            
													    series: [{
													                type: 'bar',
													                highlight: {
													                    size: 7,
													                    radius: 7
													                },
													                style: {
													                     fillStyle: '#F0A50A'
													                },
																	fill: true,
													                xField: 'name',
													                yField: 'data1'
													               
													            }, {
													                type: 'line',
													                highlight: {
													                    size: 7,
													                    radius: 7
													                },
													                style: {
													                    stroke: '#C20024'
													                },
																	markerConfig: {
													                    type: 'circle',
																		size: 1,
																		radius: 1,
																		stroke: '#C20024',
																		'stroke-width': 1
													                },
																	fill: false,
													                xField: 'name',
													                yField: 'data2'
													               
													            }]
													},
													   {
																				
														xtype: 'fieldset',
														id: 'DayTableView',
													 	layout: {
											                type: 'hbox',
											               pack: 'start', 
											               align: 'middle'
											            },
														items: [
														        {
														        	xtype: 'panel',
																	width: '33%',
																	height : '100%',
																	styleHtmlContent: true,
																	html: [ generateHtmlDaysTable(storeDays,0,10)],
														        },
														        {
														        	xtype: 'panel',
																	width: '33%',
																	height : '100%',
																	styleHtmlContent: true,
																	html: [ generateHtmlDaysTable(storeDays,10,20)],
														        },
														        {
														        	xtype: 'panel',
																	width: '33%',
																	height : '100%',
																	styleHtmlContent: true,
																	html: [ generateHtmlDaysTable(storeDays,20,-1)],
														        }
																]
													
								 	                }, 
					 	     				]
					 	      		 },
				                ]},
				                			
				                
			
				                
				                
				                
				                
				                
// *************************************************** Year View *******************************************************			 	                

				           	{
				                title: '年',
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										
										/* Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetCurrentPower.php',
											method: 'POST',
											callbackkey: 'callback',
											params: {
												tap_id: 1
											},
	
											scope: this,      /// fix handler scope
	
											callback: function (response, value, request) {
												var wattComponent = Ext.getCmp('a_wattage');
												wattComponent.setValue(value.response.electric_power);
												
												var ampereComponent = Ext.getCmp('a_amperage');
												ampereComponent.setValue(value.response.electric_current);
												
											},
	
											failure: function (response, request) {
												Ext.Msg.alert(response);
											}
										}); */
										
										Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id=3&report_type=2&date_start=2013-07-12&date_end=2013-07-12',
											type: 'GET',
											crossDomain: true,
											dataType: "json",
											callbackkey: 'callback',
											scope: this,
											/* params: {
												tap_id: 1
											}, */
											scope: this,      /// fix handler scope
	
											callback: function (response, value, request) {
												storeTargetMonthsData(value);
										    },
										    

											failure: function (response, request) {
												Ext.Msg.alert(response);
											}
										}); 
										
										/* Ext.getCmp('yearCompareTotal').setValue('');
										Ext.getCmp('yearCompareMax').setValue('');
										Ext.getCmp('yearComapreDate').setValue(''); */
										
										
									}
								},

				            items: [
				                    
					///////////////////// Header ////////////////////
				                    
				                    {
				 		       			xtype : 'titlebar',
				 		       			docked : 'top',
				 		       			title : '年',
				 		       			items : [
				 		       			{
				 		       				xtype : 'button',
				 		       				align : 'right',
				 		       				ui : 'round',
				 		       				iconCls: 'home',
				 		       				text : 'ホーム',
				 		       				 handler: function(){
				 		       			            document.location.href = "../../index.html";         
				 		       			        }
				 		       				
				 		       			},   
				 		       			{
				 		       				xtype: 'selectfield',
				 		       				name: 'options',
				 		       				options: [
				 		       					{text: '主幹１', value: '1'},
				 		       					{text: 'リビング', value: '2'},  
				 		       					{text: '子供部屋', value: '3'}
				 		       				]
				 		       			}
				 		       			]
				 		            },
				 		            
		//////////////////////////// Set Current Wattage and Amperage///////////////////////
				 		            
				 	               /* {
				 		    			xtype: 'fieldset',
				 		    		 	layout: {
				 		                    type: 'hbox',
				 		                    pack: 'start', 
				 		                   align: 'middle'
				 		                },
				 		    			items: [
				 		    			 
				 		    			{	
				 		    				 	xtype: 'label',
				 		    				 	html: '現在の使用電力（全体) - ', 
				 		    			},
				 		    			{
				 		    					xtype: 'textfield',
				 		    					id: 'a_wattage',
				 		    					label: 'W :',
				 		    					readOnly: true,
				 		    					text: '1890.9W'
				 		    				},
				 		    				{
				 		    					xtype: 'textfield',
				 		    					id: 'a_amperage',
				 		    					label: 'A :',
				 		    					readOnly: true,
				 		    					text: '18.91A'
				 		    			}]
				 		    		}, */
				 		    		
				 		    		
	 		   		////////////////// Target and Compare date selector////////////////		 		    		
				 		    		
				 	                {
				 		    			
				 		    			xtype: 'fieldset',
				 		    			bodyStyle: "background-color: #C0C0C0;",
				 		    		 	layout: {
				 		    	            type: 'hbox',
				 		    	            pack: 'start', 
				 		    	            align: 'left'
				 		    	        },
				 		    	        
				 		    			items: [
				 		    			        {
													xtype: 'fieldset',
													bodyStyle: "background-color: #C0C0C0;",
												 	layout: {
											        type: 'vbox',
											        pack: 'start', 
											        align: 'left'
										     },
										     
												items: [
								 		    			{
								 		    	               xtype: 'datepickerfield',
								 		    	               destroyPickerOnHide: true,
								 		    	                label: '対象年',
								 		    	                name: 'targetDate',
								 		    	                dateFormat :"Y",
								 		    	                value: new Date(),
								 		    	              	picker: {
								 		    	              		yearFrom : new Date().getFullYear()-1,
								 		    	              		slotOrder:["year"],
								 		    	              		
								 		    	              		 listeners: {
								 		    	                       show: function(component, eOpts) {
								 		    	                           var date = this.getValue();
								 		    	                           if (!date || isDateInPast(date)) {
								 		    	                               this.setValue(new Date());
								 		    	                           }
								 		    	                       },
								 		    	                       
								 		    	                      change: function(picker, value) {
								 		    	                    	  
										 	 /////////////json data for Month target ///////////
										 	 
										 		    	        			Ext.data.JsonP.request({
																				url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id=3&report_type=2&date_start=2013-07-12&date_end=2013-07-12',
																				type: 'GET',
																				crossDomain: true,
																				dataType: "json",
																				callbackkey: 'callback',
																				scope: this,
																				/* params: {
																					tap_id: 1
																				}, */
																				scope: this,      /// fix handler scope
										
																				callback: function (response, value, request) {
																					storeTargetMonthsData(value);
																			    },
																			    

																				failure: function (response, request) {
																					Ext.Msg.alert(response);
																				}
																			}); 
										 		    	                 } 
								 		    	                       
								 		    	                   }, 
								 		    	              	}
								 		    			},
								 		    			        
								 		    			{
								 		    				xtype: 'fieldset',
								 		    				bodyStyle: "background-color: #C0C0C0;",
								 		    			 	layout: {
								 		    	                type: 'vbox',
								 		    	                pack: 'start', 
								 		    	               align: 'middle'
								 		                },
								 		    			items: [
								 		    			{
								 		    					xtype: 'textfield',
								 		    					id: 'yearTargetTotal',
								 		    					label: '累積電力量',
								 		    					readOnly: true,
								 		    					value: '3124'
								 		    				}, {
								 		    					xtype: 'textfield',
								 		    					id: 'yearTargetMax',
								 		    					label: '最大電力',
								 		    					readOnly: true,
								 		    					value: '192'
								 		    			}]
								 		    			
								 		    		}]}, {
								 						
								 						xtype : 'spacer'
								 					},
				 		    		
				 		    		{
				 		    			

										xtype: 'fieldset',
										bodyStyle: "background-color: #C0C0C0;",
									 	layout: {
								        type: 'vbox',
								        pack: 'start', 
								        align: 'left'
							     },
							     
									items: [
					 		    			{
					 		    				xtype: 'datepickerfield',
					 		    	               destroyPickerOnHide: true,
					 		    	                label: '比較年',
					 		    	                name: 'targetDate',
					 		    	                dateFormat :"Y",
					 		    	                id: 'yearComapreDate',
					 		    	                value: new Date(),
					 		    	              	picker: {
					 		    	              		
					 		    	              		yearFrom : new Date().getFullYear()-1,
					 		    	              		slotOrder:["year"],
					 		    	              		
					 		    	              		 listeners: {
					 		    	                       show: function(component, eOpts) {
					 		    	                           var date = this.getValue();
					 		    	                           if (!date || isDateInPast(date)) {
					 		    	                               this.setValue(new Date());
					 		    	                           }
					 		    	                       },
					 		    	                       cancel: function(picker, eOpts) {
					 		    	                            this.fireEvent('change', this, null);
					 		    	                       },
					 		    	                      change: function(picker, value) {
					 		    	                    	  
					 	 /////////////json data for Month Compare ///////////      	  
					 		    	                    	 Ext.data.JsonP.request({
																	url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id=3&report_type=2&date_start=2013-07-12&date_end=2013-07-12',
																	type: 'GET',
																	crossDomain: true,
																	dataType: "json",
																	callbackkey: 'callback',
																	scope: this,
																	/* params: {
																		tap_id: 1
																	}, */
																	scope: this,      /// fix handler scope
							
																	callback: function (response, value, request) {
																		storeCompareMonthsData(value);
																    },
																    
																	failure: function (response, request) {
																		Ext.Msg.alert(response);
																	}
																});  
							 		    	                 } 
					 		    	                       
					 		    	                   }, 
					 		    	              	}
					 		    		},
					 		    			        
						 		    	{
						 		    				xtype: 'fieldset',
						 		    				bodyStyle: "background-color: #C0C0C0;",
						 		    			 	layout: {
						 		    	                type: 'vbox',
						 		    	                pack: 'start', 
						 		    	               align: 'middle'
						 		                },
						 		    			items: [
						 		    			{
						 		    					xtype: 'textfield',
						 		    					id: 'yearCompareTotal',
						 		    					label: '累積電力量',
						 		    					readOnly: true,
						 		    					value: ''
						 		    				}, {
						 		    					xtype: 'textfield',
						 		    					id: 'yearCompareMax',
						 		    					label: '最大電力',
						 		    					readOnly: true,
						 		    					value: ''
						 		    			}]
						 		    			
						 		    		}]
				 		    			
				 		    			}
				 		    		
				 		    		]
									},	
				 		    		
				 		    		
				 		    		
									////////// graph/////////	
									
					 	               {
					 	                   xtype: 'carousel',
					 	                   height: 430,
						 	         		width: '100%',
	
					 	                   defaults: {
					 	           				styleHtmlContent: true	
					 	           			},

							 	           items: [
							 	                  {
														
														xtype: 'chart',
														background: 'white',
														width: '100%',
														height: 430,
																						
											            animate: true,
											            store: storeMonths,
											            axes: [{
												                type: 'numeric',
												                position: 'left',
												                fields: ['data1','data2'],
												                title: {
												                    text: '電力量(kWh)',
												                    fontSize: 15,
												                },
												                
												                grid: {
												                    odd: {
												                        opacity: 0.25,
												                        fill: '#ddd',
												                        stroke: '#bbb',
												                        'stroke-width': 0.5
												                    }
												                },
												                minimum: 0
													       		 }, 

													       			 {
													                type: 'category',
													                position: 'bottom',
													                fields: ['name'],
													                title: {
													                    text: '月',
													                    fontSize: 15
													                }
													         }
													         
													       		 
													       		 
													       		 ],
													            
													    series: [{
													                type: 'bar',
													                highlight: {
													                    size: 7,
													                    radius: 7
													                },
													                style: {
													                     fillStyle: '#F0A50A'
													                },
																	fill: true,
													                xField: 'name',
													                yField: 'data1'
													               
													            }, {
													                type: 'line',
													                highlight: {
													                    size: 7,
													                    radius: 7
													                },
													                style: {
													                    stroke: '#C20024'
													                },
																	markerConfig: {
													                    type: 'circle',
																		size: 1,
																		radius: 1,
																		stroke: '#C20024',
																		'stroke-width': 1
													                },
																	fill: false,
													                xField: 'name',
													                yField: 'data2'
													               
													            }]
													},
													   {

														xtype: 'fieldset',
														id : 'monthTableView',
														items: [
														        {
														        	xtype: 'panel',
																	width: '100%',
																	height : '100%',
																	styleHtmlContent: true,
																	html: [generateHtmlMonthsTable(storeMonths)],
														        }
														       
															]
								 		    			
								 	                }, 
					 	     				]
					 	      		 },
				 		    		
				 		    		
				                ]},
				                
				                
				                
			
				                
				                
				                
				                
				                
//************************************** Statistic View *********************************************************************************************

				            {
				                title: '統計',
				              	iconCls: 'chart',
				              	styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										
										Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetCurrentPower.php',
											method: 'POST',
											callbackkey: 'callback',
											params: {
												tap_id: 1
											},
	
											scope: this,      /// fix handler scope
	
											callback: function (response, value, request) {
												var wattComponent = Ext.getCmp('wattage');
												wattComponent.setValue(value.response.electric_power);
												
												var ampereComponent = Ext.getCmp('amperage');
												ampereComponent.setValue(value.response.electric_current);
												
											},
	
											failure: function (response, request) {
												Ext.Msg.alert(response);
											}
										});
										
										Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id=3&report_type=2&date_start=2014-07-12&date_end=2014-07-12',
											type: 'GET',
											crossDomain: true,
											dataType: "json",
											callbackkey: 'callback',
											scope: this,
											/* params: {
												tap_id: 1
											}, */
											scope: this,      /// fix handler scope
	
											callback: function (response, value, request) {
												storeCurrentYearStatisticsData(value);
										    },
										    

											failure: function (response, request) {
												Ext.Msg.alert(response);
											}
										}); 
										
										Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id=3&report_type=2&date_start=2013-07-12&date_end=2013-07-12',
											type: 'GET',
											crossDomain: true,
											dataType: "json",
											callbackkey: 'callback',
											scope: this,
											/* params: {
												tap_id: 1
											}, */
											scope: this,      /// fix handler scope
	
											callback: function (response, value, request) {
												storePastYearStatisticsData(value);
										    },
										    

											failure: function (response, request) {
												Ext.Msg.alert(response);
											}
										}); 
										
										
									}
								},
								
								

				            items: [
				                    
					///////////////////// Header ////////////////////
				                    
				                    {
				 		       			xtype : 'titlebar',
				 		       			docked : 'top',
				 		       			title : '統計',
				 		       			items : [
				 		       			{
				 		       				xtype : 'button',
				 		       				align : 'right',
				 		       				ui : 'round',
				 		       				iconCls: 'home',
				 		       				text : 'ホーム',
				 		       				 handler: function(){
				 		       			            document.location.href = "../../index.html";         
				 		       			        }
				 		       				
				 		       			},   
				 		       			{
				 		       				xtype: 'selectfield',
				 		       				name: 'options',
				 		       				options: [
				 		       					{text: '主幹１', value: '1'},
				 		       					{text: 'リビング', value: '2'},  
				 		       					{text: '子供部屋', value: '3'}
				 		       				]
				 		       			}
				 		       			]
				 		            },
				 		            
				 		            
		//////////////////////////// Set Current Wattage and Amperage///////////////////////
				 		    		
				 	               {
				 		    			xtype: 'fieldset',
				 		    		 	layout: {
				 		                    type: 'hbox',
				 		                    pack: 'start', 
				 		                   align: 'middle'
				 		                },
				 		    			items: [
				 		    			
				 		    			{	
				 		    				 	xtype: 'label',
				 		    				 	html: '現在の使用電力（全体) - ', 
				 		    			},
				 		    			{
				 		    					xtype: 'textfield',
				 		    					id: 'wattage',
				 		    					label: 'W :',
				 		    					readOnly: true,
				 		    					text: '1890.9W'
				 		    				},
				 		    				{
				 		    					xtype: 'textfield',
				 		    					id: 'amperage',
				 		    					label: 'A :',
				 		    					readOnly: true,
				 		    					text: '18.91A'
				 		    			}]
				 		    		},
				 		            
				 		            
				 		            
				 		            
				 		            
				 		            
				 		            
				 		           {
				 	                   xtype: 'carousel',
				 	                   height: 550,
					 	         		width: '100%',

				 	                   defaults: {
				 	           				styleHtmlContent: true	
				 	           			},

						 	           items: [
						 	                   
						 	                  {
													
													xtype: 'chart',
													background: 'white',
													width: '100%',
													height: 550,
																					
										            animate: true,
										            shadow : true,
										            store: storeStatistic,
										       
										             axes: [{
											                type: 'numeric',
											                position: 'left',
											                fields: ['d1T','d1M','d2T','d2M'],
											                title: {
											                    text: '電力量(kWh)',
											                    fontSize: 15,
											                },
											                
											                grid: {
											                    odd: {
											                        opacity: 0.25,
											                        fill: '#ddd',
											                        stroke: '#bbb',
											                        'stroke-width': 0.5
											                    }
											                },
											                minimum: 0
												       		 }, 

												       			 {
												                type: 'category',
												                position: 'bottom',
												                fields: ['name'],
												                title: {
												                    text: '月',
												                    fontSize: 15
												                }
												         }],
												            
												    series: [{
												                type: 'bar',
												                highlight: {
												                    size: 7,
												                    radius: 7
												                },
												                style: {
												                     fillStyle: '#F0A50A'
												                },
																fill: true,
																axis: 'left',
												                xField: 'name',
												                yField:'d1T',
												            },
												             {
												                type: 'line',
												                highlight: {
												                    size: 7,
												                    radius: 7
												                },
												                style: {
												                    stroke: '#C20024'
												                },
																markerConfig: {
												                    type: 'circle',
																	size: 1,
																	radius: 1,
																	stroke: '#C20024',
																	'stroke-width': 1
												                },
																fill: false,
												                xField: 'name',
												                yField: 'd1M'
												               
												            }, 
												            {
												                type: 'bar',
												                highlight: {
												                    size: 7,
												                    radius: 7
												                },
												                style: {
												                     fillStyle: '#99CC00',
												                     
												                },
																fill: true,
																axis: 'left',
												                xField: 'name',
												                yField:'d2M',
												            },
												             {
												                type: 'line',
												                highlight: {
												                    size: 7,
												                    radius: 7
												                },
												                style: {
												                    stroke: '#330099'
												                },
																markerConfig: {
												                    type: 'circle',
																	size: 1,
																	radius: 1,
																	stroke: '#330099',
																	'stroke-width': 1
												                },
																fill: false,
												                xField: 'name',
												                yField: 'd2T'
												            } 
												            
												            
												            ] 
												},
												
												
												   {

													xtype: 'fieldset',
													id : 'statisticTableView',
													items: [
													        {
													        	xtype: 'panel',
																width: '100%',
																height : '100%',
																styleHtmlContent: true,
																html: [generateHtmlStatisticTable(storeStatistic)],
													        }
													       
														]
							 		    			
							 	                }, 
				 	     				]
				 	      		 },
				 		            
				 		            
				                ]}
					]
				});
			}
		});
	</script>

    

 </head>

 <body>
 </body>

</html>
